<template>
    <div class="footer">
        <span class="time"></span>
        <span class="time"></span>
    </div>
</template>

<script>
export default {
    data(){
        return{
            date:'',
            time:'',
        }
    },
    methods:{

    },
    created() {
        setInterval(function(){
            var date = new Date();
            var year = date.getFullYear();    //获取当前年份
            var mon = date.getMonth()+1;      //获取当前月份
            var da = date.getDate();          //获取当前日
            var day = date.getDay();          //获取当前星期几
            var h = date.getHours();          //获取小时
            var m = date.getMinutes();        //获取分钟
            var s = date.getSeconds();        //获取秒
            var d = document.getElementsByClassName('time');

            d[0].innerHTML='当前时间:'+year+'年'+mon+'月'+da+'日'+h+':'+m+':'+s;
            d[1].innerHTML='星期'+day+' ';
        },1000)
    }
}
</script>

<style scoped>
.footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    background-color: #242f42;
}
    .text{
        text-align: center;
        line-height: 30px;
        color: #fff;
        font-size: 14px;
    }
    .time:nth-of-type(2){
        position: absolute;
        right: 40px;
        color: #fff;
        font-size: 14px;
        line-height: 30px;
    }
    .time:nth-of-type(1){
        position: absolute;
        right: 120px;
        color: #fff;
        font-size: 14px;
        line-height: 30px;
    }
</style>